<template>
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view class="container">

		<!-- 页面头部返回和搜索图标，标题 -->
		<my-Back-search :yesSearch="false">
			<template #back>
				<uni-icons @click="onBack" type="back" size="28" color="#ff0000"></uni-icons>
			</template>
			<template #time>
				<view>ئارتىس ئۇچۇرى</view>
			</template>
		</my-Back-search>

		<!-- 演员信息 -->
		<view class="actor">
			<view class="actor-IYN">
				<image class="actor-img" :src="actorValue.url"></image>
				<view style="direction: rtl;">
					<view class="actor-yurt"> تەۋەلىكى : {{actorValue.yurts}} </view>
					<view class="actor-yurt">ئىسمى : {{actorValue.name}}</view>
				</view>
			</view>
			<view class="content">
				{{actorValue.content}}
			</view>
		</view>
		<view>
			<view class="image-eight-Three">
				<my-img-y-Three class="item" v-for="item in actorValue.collection" :images="item.imageUrl"
					:tags="item.tags" :name="item.name" :bifen="item.bifen" :biao="item.biao" :episode="item.episode"
					:episodes="item.episodes" :urlId="item.id"></my-img-y-Three>
			</view>
		</view>


	</view>
	<view style="display: flex; justify-content: center; align-items: center; padding: 30rpx 0; color: #464646;">
		<view>... مەزمۇن تۈگىدى</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		actorsByid
	} from '@/API/actorApis.js';
	const actorValue = ref([]);
	const loading = ref(true)

	// 演员信息
	const actorFunction = async (id) => {
		let res = await actorsByid(id);
		actorValue.value = res.data;
		console.log("演员信息：", res.data);
		loading.value = false
	}

	// 获取演员信息
	onLoad((e) => {
		console.log("演员ID：", e.id);
		actorFunction(e.id)
	})
	// 返回按钮
	function onBack() {
		uni.navigateBack({
			delta: 1 // 返回上一个页面
		});
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;

		.actor {
			width: 92%;
			position: relative;
			left: 4%;
			box-sizing: border-box;
			padding: 30rpx;
			background: #1d1d1d;
			border-radius: 20rpx;
			box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);
			direction: rtl;

			.actor-IYN {
				display: flex;
				align-items: center;

				.actor-img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					margin-left: 20rpx;
				}

				.actor-yurt {
					padding: 10rpx 0;
					max-width: 450rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					direction: rtl;
				}
			}

			.content {
				margin-top: 30rpx;
				background-color: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(20rpx);
				padding: 30rpx;
				border-radius: 20rpx;
				max-height: 400rpx;
				font-size: 23rpx;
				overflow-y: scroll;

			}
		}
	}

	.image-eight-Three {
		box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);
		direction: rtl;
		width: 92%;
		position: relative;
		margin: 0 auto;
		top: 30rpx;
		box-sizing: border-box;
		background: #1d1d1d;
		padding: 30rpx;
		display: grid;
		gap: 15rpx;
		grid-template-columns: repeat(3, 1fr);
		border-radius: 20rpx;

		.item {
			overflow: hidden;
			/* 防止内容溢出 */
			position: relative;
			width: 100%;
			/* 图片宽度填充整个容器 */
			height: auto;
			/* 根据宽度自动调整高度 */
			display: block;
			/* 移除图片下方默认的空白间隙 */
			object-fit: cover;
			/* 保证图片完全覆盖容器，可能会裁剪图片 */
		}
	}
</style>